<template>
    <van-nav-bar title="榜单排行" left-text="" left-arrow @click-left="goBack" />
    <div class="rank_header">
       <div class="title">
            <h3>全站商品热销榜</h3>
       </div>
    </div>
    <div class="rank_box">
        <div class="item" v-for="item in ranking">
            <div class="top">
                <div class="img" name="thumbs" >
                    <van-image
                        :style="{ margin: '6px' }"
                        width="80"
                        height="80"
                        :src="item.product.thumbs_text"
                    />
                </div>
                <div class="content">
                    <div class="title">{{ item.name }}</div>
                    <p class="middle"><span>超值拼团价</span>￥{{ item.product.buy }}</p>
                    <p class="desc">“物美价廉”</p>
                </div>
            </div>
            <div class="footer">
                <div class="price">
                    ￥<span>{{ item.product.price }}</span>
                    单价
                    <span>极速退款</span>
                </div>
                <div class="btn" @click="toBuy(item.product.id)">
                    去购买>
                </div>
            </div>
            <div class="tip">
                <img src="/assets/images/hot.png" alt="">
                <span>畅销量{{ item.buycount }}次</span>
            </div>
        </div>
    </div>
</template>
<script setup> 
const { proxy } = getCurrentInstance()
const goBack = () => { proxy.$router.go(-1) }
const toBuy = (val) => {
    proxy.$router.push({
        path: '/product/info',
        query: {
            proid: val
        }
    })
}
const ranking = ref([])
onBeforeMount(() => {
    getRanking()
})
const getRanking = async()=>{
    let result = await Api.productRanking();
    if(result.code == 1)
    {
        ranking.value = result.data.list
    }
}

</script>
<style scoped>
@import url(/public/assets/css/ranking.css);
</style>